<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avatar_box">
        <img src="../../../assets/d.png" class="login_animation" />
      </div>
      <el-tabs v-model="activeName" lazy stretch>
        <el-tab-pane label="用户登陆" name="用户登陆">
          <!-- 登陆表单区 -->
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginrules"
            class="login_form"
          >
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                prefix-icon="iconfont icon-user"
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                prefix-icon="iconfont icon-3702mima"
              ></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登陆</el-button>
              <el-button type="info" @click="resetLoginForm(1)">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="用户注册" name="用户注册">
          <!-- 注册表单区 -->
          <el-form
            ref="registerForm"
            :model="registerForm"
            :rules="registerules"
            class="register_form"
          >
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                v-model="registerForm.username"
                prefix-icon="iconfont icon-user"
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="registerForm.password"
                prefix-icon="iconfont icon-3702mima"
              ></el-input>
            </el-form-item>
            <!-- 上一级 -->
            <el-form-item prop="lead">
              <el-input
                v-model="registerForm.lead"
                prefix-icon="iconfont icon-users"
              ></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="register">注册</el-button>
              <el-button type="info" @click="resetLoginForm(2)">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 标签页名
      activeName: "用户登陆",
      //这是登陆的表单数据
      loginForm: {
        username: "",
        password: "",
      },
      //表单验证规则
      loginrules: {
        //验证用户名是否合法
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      // 注册表单数据
      registerForm: {
        username: "",
        password: "",
        lead: "",
      },
      registerules: {
        //验证用户名是否合法
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        lead: [
          { required: true, message: "请输入上一级", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (window.localStorage.getItem("token")) {
      this.$router.push("/mwelcome");
    }
  },
  methods: {
    // 点击重置表单
    resetLoginForm(value) {
      if (value === 1) {
        this.$refs.loginForm.resetFields();
      } else if (value === 2) {
        this.$refs.registerForm.resetFields();
      }
    },
    // 登陆按钮
    login() {
      //   //表单预验证
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "/hx/login",
          this.loginForm
        );
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        this.$message.success("登陆成功");
        // // 1.登陆成功之后的token, 保存到客户端的 sessionStorage中
        // //  1.1 项目中除了登陆之外的API接口, 必须在登陆之后才能访问
        // //  1.2 token只应在当前网站打开期间生效, 所以将token保存咋sessionSrorage中
        window.localStorage.setItem("token", res.data.token);
        window.localStorage.setItem("user", JSON.stringify(res.data.user));
        // //2.通过编程式导航跳转到后台主页, 路由地址是 home
        this.$router.push("/mwelcome");
      });
    },
    // 注册按钮
    register() {
      this.$refs.registerForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "/hx/register",
          this.registerForm
        );
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        this.$message.success("注册成功");
      });
    },
  },
};
</script>


<style lang="less" scoped>
.login_container {
  background: url("../../../assets/bj.jpg");
  height: 100%;
}

.login_box {
  width: 360px;
  height: 300px;
  background-color: #1c242f;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #00e6fb;
    z-index: 9999;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #010a16;
    }
  }

  .login_form {
    // position: absolute;
    margin: 70px 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .register_form {
    // position: absolute;
    margin: 8px 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    // 弹性居中
    display: flex;
    // 尾部对齐
    justify-content: flex-end;
  }
}
</style>